<template>
	<div>
		<div class="position-fixed right-0 left-0 top-0 bottom-0 z-25" v-if="isIframe">
			{{chooseItem}}
			<iframe id="cardFrame" class="w-100 h-100" :src="chooseItem.link" frameborder="no"></iframe>
			<div
				id="dragItem"
				class="position-absolute h-100 z-30 text-center d-flex a-center"
				style="height: inherit;top: 40%;"
				:class="outOrIn ? 'moveIn' : 'moveOut'"
				draggable="true"
				@dragstart="dragSta"
				@dragend="dragStop"
				@drag="dragMove"
			>	
				<div class="p-1 cursor border-bottom position-absolute main-content-bg-color right-0 z-30" style="width: 50px;bottom: -45px;"  @click="goBack">返回</div>
				<span @click.stop="changeState" style="width: 20px;" class="main-content-bg-color cursor" draggable="true">点击切换</span>
				<div style="width: 120px;background-color: white;height: 245px;overflow-y: scroll;" class="position-relative d-flex flex-column" :style="!outOrIn ? 'left:30px' : ''">
					<div style="padding: 5px;" class="cursor border-bottom text-center d-flex a-center j-center border-top " :class="index===0?'border-top-0':''" v-for="(item,index) in lastuse" :key="index" @click="itemClick(item,index)">{{item.name}}</div>
				</div>
			</div>
		</div>
	</div>
</template>

<script>

import {mapState,mapMutations,mapActions} from 'vuex'
export default {
	
	data() {
		return {
			startTop: 0,
			endTop: 0,
			outOrIn:false
		};
	},
	computed:{
		...mapState(['isIframe','chooseItem','lastuse'])
	},

	methods: {
		
		itemClick(item,index){
			let bool = true
			if(item.button){
				bool=false
			}
			this.setItem({bool:bool,item:item})
			this.clickSortLastuse({item:item,index:index})
		},
		goBack(){
			this.setItem({bool:false,item:{}})
			
		},
		...mapMutations(['setItem']),
		...mapActions(['clickSortLastuse']),
		dragMove(e) {
			if (this.startTop < e.y) {
				$('#dragItem')[0].style.top = this.startTop + (e.y - this.startTop) + 'px';
			} else {
				$('#dragItem')[0].style.top = e.y + 'px';
			}
		},
		dragSta(e) {
			this.startTop = e.y;
		},
		dragStop(e) {
			this.endTop = e.y;

			if (this.endTop < this.startTop) {
				$('#dragItem')[0].style.top = this.endTop - (this.startTop - this.endTop) + 'px';
			} else {
				$('#dragItem')[0].style.top = this.endTop + 'px';
			}
		},
		
		changeState() {
			this.outOrIn = !this.outOrIn;
		}
	}
};
</script>

<style>
.moveOut {
	right: -102px !important;

	transition: all 0.2s ease-in-out;
}

.moveIn {
	right: 20px !important;

	transition: all 0.2s ease-in-out;
}

body {
	margin: 0 !important;
	padding: 0 !important;
}
header {
	margin: 0 !important;
	padding: 0 !important;
}

/* ::-webkit-scrollbar{
  display: none;
} */


/* ::-webkit-scrollbar-track {
  background: rgba(0, 0, 0, 0.1);
  border-radius: 5px;
}
::-webkit-scrollbar {
  -webkit-appearance: none;
  width: 5px;
  height: 5px;
}



::-webkit-scrollbar-thumb {
  cursor: pointer;
  border-radius: 5px;
  background: rgba(0, 0, 0, 0.25);
  transition: color 0.2s ease;
} */
</style>
